<template>
  <div class='container'>
    <el-card shadow="never">
      <div class="app">
        <el-form :model="pagination" ref="pagination">
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="关键字：">
                <el-input style="width:200px " v-model="pagination.keyword" placeholder="根据编号搜索"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="8">
              <el-button @click="resetForm" prop="tags">清除</el-button>
              <el-button type="primary" @click="handleFilter">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 数据记录 -->
      <el-alert v-if="alertText !== ''" :title="alertText" type="info" class="alert" :closable="false" show-icon></el-alert>

      <el-table :data="dataList" style="width: 100%" v-loading="listLoading">
        <el-table-column label="编号" width="180" prop="id">

        </el-table-column>
        <el-table-column label="题型" width="180" prop="questionType" :formatter="formatType">
          <!-- {{formQuestion ()}} -->

          <!--  <template v-slot="{row}">
            {{formQuestionType(row.questionType)}}
          </template> -->

        </el-table-column>
        <!-- <template v-slot="{row}">
          <span v-for="(item,index) in row.questionIDs" :key="index">
            <a href="#" class="blue" @click="handle()">{{item.number}}</a>
          </span>
        </template> -->
        <el-table-column label="题目编号">
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.questionIDs" :key="index">
              <p class="font" @click="isShowAddBox=true">{{item.number}}</p>
            </span>
          </template>

        </el-table-column>
        <el-table-column label="录入时间" width="180" prop="addTime">
        </el-table-column>
        <el-table-column label="答题时间(s)" width="180" prop="totalSeconds">
        </el-table-column>
        <el-table-column label="正确率(%)" prop="accuracyRate">
        </el-table-column>
        <el-table-column label="录入人" prop="userName">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button class="liStyle" type="danger" icon="el-icon-delete" circle v-if="scope.row.status!='deleted'" @click="handleDel(scope.row.id)"></el-button>
          </template>

        </el-table-column>
      </el-table>

      <el-dialog title="题目预览" :visible.sync="isShowAddBox">
        <el-form>
          <el-row class="row1">
            <el-col :span="6">
              <div class="grid-content bg-purple">【题型】：</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">【编号】：</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">【难度】：</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">【标签】：</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">【学科】：</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">【目录】：</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">【方向】：</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">【题干】：</div>
            </el-col>
          </el-row>
          <hr>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">[题型]</div>
            </el-col>
          </el-row>
          <el-row row="4">
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">选项：（以下选中的选项为正确答案）</div>
            </el-col>
          </el-row>
          <hr>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">【参考答案】：<el-button type="danger">视频答案预览</el-button>
              </div>

            </el-col>
          </el-row>
          <hr>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">【答案解析】：</div>
            </el-col>
          </el-row>
          <hr>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">【题目备注】：</div>
            </el-col>
          </el-row>
        </el-form>
        <el-button type="primary" class="close" @click="isShowAddBox=false">关闭</el-button>
      </el-dialog>

      <!-- 分页 -->
      <el-pagination background :page-sizes="[2,5,10,15,20]" layout=" total,prev,pager, next, sizes,jumper" :total="total" :current-page="pagination.page" :page-size="pagination.pagesize" @current-change="changePage" @size-change="sizeChange" />

    </el-card>

  </div>
</template>

<script>
import { randoms, removeRandoms } from '../../api/hmmm/questions'
import { questionType } from '../../api/hmmm/constants'
export default {
  name: 'question',
  data () {
    return {
      questionType,
      // 添加角色弹窗标志位(data中添加标志位)
      isShowAddBox: false,
      input: '',
      alertText: '',
      // 列表
      dataList: [],
      counts: null,
      // 总条数
      total: null,
      listLoading: true,
      pagination: {
        page: 1,
        pageSize: 2,
        keyword: ''
      }
    }
  },
  // 创建完毕状态
  created () {
    this.getList()
  },

  methods: {

    formatType (type) {
      const info = this.questionType.find(item => parseInt(item.value) === parseInt(type.questionType))
      // console.log(info)
      if (info) {
        return info.label
      } else {
        return '其他'
      }
    },

    // 删除
    handleDel (user) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(() => {
          removeRandoms({ id: user })
            .then(response => {
              this.$message.success('成功删除了用户' + '!')
              this.dataList.splice(user, 1)
              this.getList(this.pagination)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },

    // 监听每页条数的变化
    sizeChange (pagesize) {
      this.pagination.pagesize = pagesize
      this.getList()
    },
    changePage () {
      // page表示切换后最新的页码
      this.pagination.page = 1
      this.getList(this.pagination)
    },

    async getList () {
      this.listLoading = true
      try {
        const res = await randoms(this.pagination)
        // console.log(res)
        this.dataList = res.data.items
        this.total = res.data.counts
        this.alertText = `共 ${this.total} 条记录`
        this.listLoading = false
      } catch {
        this.$message.error('获取列表失败')
        this.loading = false
      }
    },
    // ******************************************清除
    resetForm () {
      this.pagination.keyword = ''
    },
    // ***********************************搜索信息
    handleFilter () {
      this.pagination.page = 1
      this.getList(this.pagination)
    }

  },
  // 挂载结束
  mounted: function () { },
  // 组件更新
  updated: function () { }

}
</script>

<style lang="scss" scoped>
.liStyle {
  background-color: #f3c5c5; /*默认白色*/
}
.liStyle:hover {
  background-color: #f56c6c; /*鼠标移上改变颜色*/
}
.font {
  cursor: pointer;
  color: rgb(0, 153, 255);
}
.close {
  margin-left: 570px;
}
.row1 {
  padding: 30px 0;
}
</style>
